<script setup>
import Password from "@/components/svg/password.vue";
import Email from "@/components/svg/Email.vue";
import {reactive, ref} from "vue";
import {ElMessage} from "element-plus";

import AuthApi from "@/api/Auth.js";
import CodeApi from "@/api/CodeApi.js";
const state = reactive({
  dialog:{
    bindEmailDialog:false,
    updatePasswordDailog:false
  },
  updatePasswordDto:{
    oldPassword:null,
    newPassword:null
  },
  bindEmailDto:{
    newEmail:null,
    code:null
  }
})


const countdownText = ref("点击获取验证码")
let countdownTimer = null;
const countdownTime = ref(60)
const getVerifyCode = () => {
  clearInterval(countdownTimer)
  let newEmail = state.bindEmailDto.newEmail;
  if (newEmail===null || newEmail===""){
    ElMessage.error("邮箱不能为空!")
    return
  }
  CodeApi.getCode(newEmail).then(res=>{
    if (!res.flag){
      ElMessage.error(res.message)
    }else {
      ElMessage.success("验证码已发送!")
      countdownTimer = setInterval(() => {
        countdownTime.value--;
        countdownText.value = `${countdownTime.value}s重新获取`;
        if (countdownTime.value < 0) {
          // 倒计时结束，更新显示信息并重新开始倒计时
          countdownText.value = "点击获取验证码";
          clearInterval(countdownTimer);
          countdownTime.value = 60;
        }

      }, 1000); // 每秒更新一
    }
  })

}

const submitBindEmail= ()=>{
  if (state.bindEmailDto.newEmail===null || state.bindEmailDto.newEmail ===""){
    ElMessage.error("邮箱不能为空!")
    return
  }
  if (state.bindEmailDto.code ===null || state.bindEmailDto.newEmail ===""){
    ElMessage.error("验证码不能为空")
    return
  }
  AuthApi.updateBindEmail(state.bindEmailDto).then(res=>{
    if (!res.flag){
      ElMessage.error(res.message)
      return
    }
    ElMessage.success("更改邮箱成功")
    state.dialog.bindEmailDialog= false
  })
}
const submitUpdatePwd= ()=>{
  if (state.updatePasswordDto.oldPassword===null || state.updatePasswordDto.oldPassword ===""){
    ElMessage.error("旧密码不能为空!")
    return
  }
  if (state.updatePasswordDto.newPassword===null || state.updatePasswordDto.newPassword ===""){
    ElMessage.error("新密码不能为空!")
    return
  }
  AuthApi.updatePassword(state.updatePasswordDto).then(res=>{
    if (!res.flag){
      ElMessage.error(res.message)
      return
    }
    ElMessage.success("更改密码成功")
    state.dialog.updatePasswordDailog= false
  })
}
</script>
<template>
  <div  class="card" style="height: 100%;">
    <div class="account-item card">
      <Password class="svg"/>
      <div class="right">
        <p class="info">
          <span class="title">密码</span>
          <span class="content">*********</span>
        </p>
        <el-button size="small" @click="state.dialog.updatePasswordDailog=true">更改</el-button>
      </div>
    </div>
    <div class="account-item card">
      <Email class="svg"/>
      <div class="right">
        <p class="info">
          <span class="title">邮箱</span>
          <span class="content">*********</span>
        </p>
        <el-button size="small" @click="state.dialog.bindEmailDialog=true">更改</el-button>
      </div>
    </div>
  </div>
  <!--  更换邮箱-->
  <el-dialog v-model="state.dialog.bindEmailDialog" title="绑定邮箱" center width="30%" style="border-radius: 8px" :close-on-click-modal="false">
    <el-form :model="state.bindEmailDto" style="width: 80%;margin: 0 auto">
      <el-form-item prop="newEmail">
        <el-input placeholder="请输入新的邮箱" v-model="state.bindEmailDto.newEmail"/>
      </el-form-item>
      <el-form-item prop="code">
        <p class="verify-code-box">
          <el-input placeholder="验证码" v-model="state.bindEmailDto.code"/>
          <el-button type="primary" plain style="margin-left: 5px;font-size: 13px" :disabled="countdownTime!==60" @click="getVerifyCode">{{ countdownText }}
          </el-button>
        </p>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="state.dialog.bindEmailDialog = false">取消</el-button>
        <el-button type="primary" @click="submitBindEmail">
          保存
        </el-button>
      </span>
    </template>
  </el-dialog>
  <!--  更改密码-->
  <el-dialog v-model="state.dialog.updatePasswordDailog" title="更改密码" center width="30%" style="border-radius: 8px" :close-on-click-modal="false">
    <el-form :model="state.updatePasswordDto" style="width: 80%;margin: 0 auto">
      <el-form-item prop="oldPassword">
        <el-input placeholder="请输入旧密码" v-model="state.updatePasswordDto.oldPassword"/>
      </el-form-item>
      <el-form-item prop="newPassword">
        <el-input placeholder="请输入新的密码" v-model="state.updatePasswordDto.newPassword"/>
      </el-form-item>

    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="state.dialog.updatePasswordDailog = false">取消</el-button>
        <el-button type="primary" @click="submitUpdatePwd">
          保存
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<style scoped lang="less">
.account-item {

  display: flex;
  align-items: center;
  height: 60px;
  margin: 10px 0;
  padding: 10px;
  border-radius: 8px;

  .svg {
    width: 30px;
    height: 30px;
    margin-right: 10px;
  }

  .right {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    .info {
      display: flex;
      flex-direction: column;

      .title {
        font-size: 16px;
        font-weight: 600;
      }

      .content {
        font-size: 14px;
        color: #999999;
      }
    }
  }

}
.tip {
  width: 100%;
  height: 18px;
  line-height: 18px;
  color: #409eff;
  cursor: pointer;
  font-size: 13px;
  text-align: center;
}

.verify-code-box {
  display: flex;
  width: 100%;
}
.card{
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.72);
}
</style>
